<template>
  <div class="app-container">
   <div>
     <el-card>
       <div class="title">报告生成设置</div>
       <div class="flex justify-content-space-between padding-20 item-box" >
         <div class="left-box">
           <div class="sub-title">Word 模板设置</div>
           <div class="sub-text">设置绩效考核报告的Word 模板格式</div>
         </div>
         <el-button type="primary">上传模板</el-button>
       </div>
       <div class="flex justify-content-space-between padding-20 item-box">
         <div class="left-box">
           <div class="sub-title">Excel 模板设置</div>
           <div class="sub-text">设置绩效考核报告的Excel 模板格式</div>
         </div>
         <el-button type="primary">上传模板</el-button>
       </div>
     </el-card>
     <el-card>
       <div class="title">平台报送设置</div>
       <div class="flex justify-content-space-between" >
         <div class="flex justify-content-space-between " style="width: 100%">
           <div class="flex-auto " style="margin-right: 20px">
             <div class="api-address">接口地址</div>
             <el-input v-model="apiPushAddress" ></el-input>
           </div>
           <div class="flex-auto" style="margin-left: 20px">
             <div class="api-address">接口密钥</div>
             <el-input v-model="apiPushKey" ></el-input>
           </div>
         </div>
       </div>
       <div class="api-address">质控规则设置</div>
       <div class="rule-item">数据完整性校验</div>
       <div class="rule-item">数据格式校验</div>
       <div class="rule-item">数据逻辑关系校验</div>
     </el-card>
     <el-card>
       <div class="title">平台预警设置</div>
       <div class="warning-box flex justify-content-space-between">
         <div class="flex-auto notice-box">
           <div class="flex justify-content-space-between">
             <div class="notice-title">邮件通知</div>
             <el-switch v-model="noticeOptions.mail.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
           </div>
           <el-input v-model="noticeOptions.mail.value"></el-input>
         </div>

         <div class="flex-auto notice-box" style="margin: 0 30px">
           <div class="flex justify-content-space-between" style="">
             <div class="notice-title">短信通知</div>
             <el-switch v-model="noticeOptions.phone.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
           </div>
           <el-input v-model="noticeOptions.phone.value"></el-input>
         </div>

         <div class="flex-auto notice-box">
           <div class="flex justify-content-space-between">
             <div class="notice-title">系统消息</div>
             <el-switch v-model="noticeOptions.system.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
           </div>
           <el-select v-model="noticeOptions.system.value" placeholder="请选择">
             <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
           </el-select>
         </div>

       </div>

     </el-card>
   </div>
  </div>
</template>
<script setup>
const options = ref(  [
    {value: '选项1', label: '黄金糕'},
    {value: '选项2', label: '双皮奶'}
])
const apiPushAddress = ref('')
const apiPushKey = ref('')

const noticeOptions = reactive({
  mail:{
     status: true,
     value: '选项1'
  },
  phone:{
     status: false,
     value: '选项2'
  },
  system:{
     status: false,
     value: '选项3'
  }
})
</script>
<style lang='scss' scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  .el-card {
    border-radius: 13px;
    border: none;
    padding: 20px 10px;
    background-color: #dedede;
    margin-bottom: 20px;
    .title {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .item-box{
      background-color: #FFFFFF;
      border-radius: 10px;
       margin-top: 20px;
       .left-box{
         .sub-title{
           font-size: 16px;
           font-weight: 600;
         }
         .sub-text{
           color: #9DA5B2;
           padding-top: 10px;
           font-weight: 400;
         }
       }

    }
    .api-address{
      margin:20px 0 20px 0;
      font-weight: 600;
    }
    .rule-item{
      margin: 20px 0;
      font-weight: 600;
      background-color: #FFFFFF;
      padding: 20px;
      border-radius: 10px;
    }
    .notice-box{
       background-color: #FFFFFF;
       padding: 30px 20px;
       border-radius: 10px;
      .notice-title{
         font-weight: 600;
        padding-bottom: 20px;
      }
    }
  }




}
</style>
